<template>
	<view class="xinli">
		<view class="status_bar">
		</view>
		<view class="yujing-word1">
		<image src="../../../static/yujing/back.png" mode="" @click="to_shouye"></image>
			<view class="word1-word">
				心理自测
			</view>
		</view>
		<view class="xinli-box1">
			<image src="../../../static/icon/icon7.png"  mode=""></image>
			<view class="box1-word">
				挑战成功得积分
			</view>
			<view class="box1-image1">
				<image src="../../../static/icon/icon6.png" mode=""></image>
			</view>
			<view class="box1-image2">
				<image src="../../../static/icon/icon2.png" mode=""></image>
			</view>
			<view class="box1-image3">
				<image src="../../../static/icon/icon8.png" mode=""></image>
			</view>
			<view class="box1-word1">
				完成题目挑战
			</view>
			<view class="box1-word2">
				获得相应的积分
			</view>
			<view class="box1-box" >
				<navigator url="/pages/shouye/anniu/dati">
					<button >进入答题</button>
				</navigator>
			</view>
		</view>
		<view class="xinli-box2">
			<image src="../../../static/icon/icon5.png" mode=""></image>
			<view class="box2-word">
				挑战排名
			</view>
			<view class="xinli-paiming">
				<view class="xinli-paimingul">
					<ul>
						<li>排名</li>
						<li>昵称</li>
						<li>积分</li>
						<li>耗时</li>
					</ul>
				</view>
				<view class="xinli-paimingul2">
					<ul v-for="(item,index) in dat" :key="index">
						<li>{{item.pm}}</li>
						<li>{{item.name}}</li>
						<li class="li1">{{item.score}}</li>
						<li class="li2">{{item.time}}</li>
					</ul>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				dat:[]
			}
		},
		mounted() {
			let that=this
			uni.request({
				url:'http://127.0.0.1:8080/changedata/changedatalist',
				method: 'GET',
				dataType:'json',
				data: {
				
				},
				header: {
					// 'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					console.log(res.data.data);
					that.dat = res.data.data;
					console.log(that.dat);
				}
			})
		},
		methods: {
			to_shouye(){
				uni.switchTab({
					url:"../shouye"
				})
			},
			// to_dati(){
			// 	uni.navigateTo({
			// 		url:"@/pages/anli/anniu/dianxin"
			// 	})
			// }
			}
		}
		
</script>

<style>
	page {
		background-image: url(@/static/bg/xinlibg.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}
	*{
		padding: 0%;
		margin: 0%;
	}
	image{
		display: flex;
	}
	.yujing-word1{
		width: 90%;
		height: 100rpx;
		margin: auto;
		margin-top: 40rpx;
		position: relative;
		
	}
	.word1-word{
		color: white;
		font-size: 40rpx;
		text-align: center;
		letter-spacing: 15rpx;
		
	}
	.yujing-word1 image{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.xinli-box1{
		width: 90%;
		margin:auto;
		margin-top: 80rpx;
		
		position: relative;
	}
	.xinli-box1 image{
		width: 100%;
		height: 450rpx;
		margin: auto;
	}
	.box1-word{
		color: white;
		position: absolute;
		top: 5rpx;
		left: 240rpx;
	}
	.box1-image1 image{
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: 120rpx;
		left: 100rpx;
	}
	.box1-image2 image{
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: 120rpx;
		right: 100rpx;
	}
	.box1-word1{
		width: 220rpx;
		height: 35rpx;
		font-size: 35rpx;
		position: absolute;
		left: 70rpx;
		top: 260rpx;
	}
	.box1-word2{
		width: 250rpx;
		height: 35rpx;
		font-size: 35rpx;
		position: absolute;
		right: 30rpx;
		top: 260rpx;
	}
	.box1-box{
		
	}
	.xinli-box2{
		width: 90%;
		height: 1100rpx;
		border-radius: 70rpx;
		border: 1px solid #ccc;
		margin: auto;
		margin-top: 30rpx;
		margin-bottom: 100rpx;
		background-color: white;
		position: relative;
	}
	.xinli-box2 image{
		width: 350rpx;
		height: 80rpx;
		position: absolute;
		top: 30rpx;
		margin-left: 165rpx;
	}
	.box2-word{
		color: #f1c14e;
		position: absolute;
		left: 260rpx;
		top:30rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.xinli-paimingul ul{
		list-style-type: none;
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		margin: auto;
		margin-top: 150rpx;
		display: flex;
		color: #9f9f9f;
		justify-content: center;
	}
	.xinli-paimingul ul li{
		margin: auto;
	}
	.xinli-paimingul2 ul{
		list-style-type: none;
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}
	.xinli-paimingul2 ul li{
		margin: auto;
	}
	.box1-image3 image{
		width: 200rpx;
		height: 50rpx;
		position: absolute;
		top: 160rpx;
		left: 240rpx;
	}
	.box1-box button{
		color: white;
		font-size: 35rpx;
		width: 350rpx;
		height: 70rpx;
		border-radius: 40rpx;
		background-color: #325082;
		text-align: center;
		line-height: 70rpx;
		position: absolute;
		bottom: 30rpx;
		left: 165rpx;
	}
</style>